<script setup>
import { reactive,ref,getCurrentInstance } from 'vue'
import {faqList,getUserWallet} from '../../http/api'
import titleTop from '../../components/topTitle/index.vue'

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const { proxy } = getCurrentInstance()
const { $t } = proxy;
locale.value = localStorage.getItem('lang') || 'zhCN'

// 用户信息对象
let userInfo = ref(undefined)
// 获取用户钱包信息
const getUserWalletFn = async()=>{
    let res = await getUserWallet()
    console.log(res,'res进去了49')
    if(res.code === 200){
        userInfo.value.balance = res.result.balance
    }
}
// 判断用户是否登录
let userInfos = localStorage.getItem('userInfo')
if (userInfos) {
    userInfo.value = JSON.parse(userInfos)
    getUserWalletFn()
}
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
//子组件登录返回事件
const loginEmit = (res) => {
    userInfo.value = res
    getUserWalletFn()
}
let problemList = reactive({
    list:[{},{},{},{},{},{},{},{},{}]
})
// 获取常见问题
const getfaqList = async()=>{
    let res = await faqList()
    if(res.length){
        res.forEach(element => {
            element.show = false
        });
        problemList.list = res
    }else{
        problemList.list.length = 0 
    }
    console.log(res,'问题列表')
}
getfaqList()

// 展开收起图标点击
const changeShow = (index)=>{
    problemList.list[index].show = !problemList.list[index].show
}
let isDark = ref(true)
if(localStorage.getItem('isDark') !== undefined){
    isDark.value = localStorage.getItem('isDark') === 'true' ? true : false
}

// 获取图片路径资源
const getImageUrl2 = (name) => {
    return new URL(`../../assets/img/workPrin/${name}`, import.meta.url).href
}
// 子组件返回的切换主题颜色
const changeIsDarkEmit = (val) => {
    isDark.value = val
}
</script>
<template>
    <div class="homeBody"  :style="{ background: isDark ? `url(${getImageUrl('bg.png')})` : `url(${getImageUrl('bg2.png')})` }">
    <headNavigation :userInfo="userInfo"      @changeIsDarkEmit="changeIsDarkEmit"  :isDark="isDark"      @loginEmit="loginEmit"></headNavigation>

        <titleTop bot-text="NORMAL QUESTION" :fontFlag="true" :title="locale === 'en' ? 'common problem' : '常见问题'" :isEn="locale"  :isDark="isDark" :isShowRight="false" :isShowLine="false"></titleTop>
        <div class="qustionBox" :style="{color:isDark?'#fff':'#000'}">
            <div class="qustionList" v-for="(item,index) in problemList.list" :key="item.id">
                <div  :class="item.show ? 'questionItem borderbot1' : 'questionItem'" :style="{background:isDark?'#282B29':'#f1f1f1'}">
                    <div>{{item.problem}}</div>
                    <img  :src="item.show ? getImageUrl('changeSmall.png') : getImageUrl('changeBig.png')" @click="changeShow(index)" alt="" v-if="isDark">
                    <img :src="item.show ?  getImageUrl2('close.png') : getImageUrl2('add.png')" @click="changeShow(index)" alt="" v-else>
                </div>
                <div  :class="item.show ? 'questionDetail border1': 'questionDetail'" v-show="item.show" :style="{background:isDark?'#0F0F0F':'#fff',color:isDark?'#fff':'#000'}">
                    {{item.answer}}
                </div>
            </div>
        </div>
        <div class="bottomQues" :style="{color:isDark?'#fff':'#000'}">
            <div>{{$t('msg.message.DidYouNotFind')}}</div>
        </div>
    </div>
</template>
<style scoped>
.nowEggPng2 div{
  font-size: 35px;
  left: 300px;
  bottom: 50px;
  position: absolute;
}
.nowEggPng2{
    margin: 0; padding: 24px 240px 0;display: flex;align-items: center;
    padding-bottom: 20px !important;
    position: relative;
}
.nowimg{
    width: 100px !important;
}
.borderbot1{
   border-bottom:  1px solid #fff;
}
.border1{
    border: 1px solid #fff;
    border-top: unset;
}
.homeBody {
    overflow-x: hidden;
    max-width: 2560px;
    min-width: 1200px;
    /* height: 100vh; */
    /* padding-bottom: 50px; */
    overflow-y: auto;
    /* background-color: #0F123F; */
    background: url('../../assets/img/home/bg.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    padding-top: 101px;
    padding-bottom: 50px;
    margin: 0 auto;
}
.comProblemBox{
    background: #282d7a5e;
    border-radius: 10px;
    margin: 0 240px;
    padding: 40px;
    margin-top: 22px;
}
.comProblemMain{
    
}
.comProblem{
    color: #A9AEFD;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 36px;
}
.comProblem div{
    
}
.comProblem img{
    width: 32px;
    height: 20px;
    cursor: pointer;
}
.tipsBox{
    color: #fff;
    padding-top: 126px;
}
.tips{
    font-size: 18px;
    text-align: center;
}
.tips div{
    
}
.cancall{
    font-size: 14px;
    text-align: center;
    padding-top: 9px;
}
.qustionBox {
    color: #fff;
    margin: 0 240px;
    padding-top: 20px;
    max-width: 2560px;
}

.qustionList {
    margin-bottom: 25px;
}

.questionItem {
    justify-content: space-between;
    background: #282B29;
    height: 108px;
    display: flex;
    align-items: center;
    padding: 0 30px 0 48px;
    border: 1px solid #fff;
}

.questionItem div {
    font-size: 30px;
}

.questionItem img {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.questionDetail {
    color: #fff;
    font-size: 24px;
    /* height: 108px; */
    background: #0F0F0F;
    display: flex;
    /* align-content: center; */
    align-items: center;
    padding: 20px 30px 20px 48px;
}
.bottomQues{
    padding-top: 61px;
    max-width: 2560px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    padding-bottom: 141px;
}
.bottomQues div{
    width: 487px;
    text-align: center;
}
@media screen and (max-width:1600px) {
.nowEggPng{
    margin-left: 60px;
}
.qustionBox{
    margin: 0 60px;
}
}
</style>